<template>
    <ul class="at-select-group__wrap">
        <li class="at-select-group__title" v-show="visible">{{ label }}</li>
        <li>
            <ul class="at-select-group">
                <slot></slot>
            </ul>
        </li>
    </ul>
</template>

<script type="text/babel">
    import Emitter from '../../common/mixins/emitter';

    export default {
        mixins: [Emitter],

        name: 'AtOptionGroup',

        componentName: 'AtOptionGroup',

        props: {
            label: String,
            disabled: {
                type: Boolean,
                default: false
            }
        },

        data() {
            return {
                visible: true
            };
        },

        watch: {
            disabled(val) {
                this.broadcast('AtOption', 'handleGroupDisabled', val);
            }
        },

        methods: {
            queryChange() {
                this.visible = this.$children &&
                Array.isArray(this.$children) &&
                this.$children.some(option => option.visible === true);
            }
        },

        created() {
            this.$on('queryChange', this.queryChange);
        },

        mounted() {
            if (this.disabled) {
                this.broadcast('AtOption', 'handleGroupDisabled', this.disabled);
            }
        }
    };
</script>
<style> 
/*.at-select-group__wrap {
    list-style: none;
    margin: 0;
    padding: 0
}
.at-select-group__title {
    padding-left: 10px;
    font-size: 12px;
    color: #999;
    height: 30px;
    line-height: 30px
}
.at-select-group {
    margin: 0;
    padding: 0
}
.at-select-group .at-select-dropdown__item {
    padding-left: 20px
}*/



</style>